<template>
  <div class="singerMvList">
    <el-empty v-if="mvList.length === 0" description="正在加载mv~"></el-empty>
    <div v-else class="content">
      <div class="content_item" v-for="item in mvList" :key="item.id">
        <div class="content_item_pic">
          <GlobalImageDeep
            :url="item.imgurl"
            :imgWidth="224"
            :imgHeight="127"
          />
          <!-- 播放按钮 -->
          <GlobalPlayMask
            :maskWidth="64"
            :maskHeight="64"
            @maskClick="toMvDetailsPage(item.id)"
          />
        </div>
        <div class="name one_txt_cut">{{ item.name }}</div>
        <!-- <div class="author one_txt_cut">{{ formatAuthor(item.artists) }}</div> -->
        <div class="author one_txt_cut">{{ item.publishTime }}</div>
        <div class="count">
          <i class="el-icon-video-camera"></i>
          {{ getCount(item.playCount) }}
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <el-row
      type="flex"
      class="row-bg"
      justify="center"
      v-if="mvList.length !== 0"
    >
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="12"
        @current-change="paginationCurrentChange"
        :current-page="currentPage"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import { getSingerAllMv } from "../../../../../api/singerDetailsApi";
import { getCount } from "../../../../../utils/format";
export default {
  name: "singerMvList",
  components: {},
  props: {
    id: {
      required: true,
      type: Number,
    },
    total: {
      required: true,
      type: Number,
    },
  },
  data() {
    return {
      mvList: [],
      queryInfo: {
        id: 0,
        limit: 10,
        offset: 0,
      },
      currentPage: 1,
    };
  },
  created() {
    this.queryInfo.id = this.id;
    this.getSingerAllMvMthod();
  },
  methods: {
    async getSingerAllMvMthod() {
      let result = await getSingerAllMv(this.queryInfo);
      if (result.code === 200) {
        this.mvList = result.mvs;
      }
    },
    getCount,
    paginationCurrentChange(newPage) {
      this.queryInfo.offset = (newPage - 1) * this.queryInfo.limit;
      this.currentPage = newPage;
      this.getSingerAllMvMthod();
    },
    toMvDetailsPage(id) {
      this.$router.push(`/mvDetails/${id}`);
    },
  },
  watch: {
    id: {
      // deep: true,
      handler(newValue) {
        // console.log("获取到的最新的id", newValue);
        this.queryInfo.id = newValue;
        this.queryInfo.offset = 0;
        this.currentPage = 1;
        this.getSingerAllMvMthod();
      },
    },
    total(newValue) {
      this.total = newValue;
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.singerMvList {
  /deep/ .el-pager li.active {
    color: #fff;
    background: @globalColor;
    border-radius: 50%;
    &:hover {
      color: #fff;
    }
  }
  /deep/ .el-pager li:hover {
    color: @globalColor;
  }
  /deep/ .el-image img {
    border-radius: 8px !important;
  }
  .content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .content_item {
      font-size: 14px;
      color: #333333;
      width: 224px;
      padding-bottom: 15px;
      .name {
        margin: 5px 0;
        font-size: 16px;
        &:hover {
          color: @globalColor;
          cursor: pointer;
          // animation: bounce 1s;
        }
      }
      .author {
        color: #999999;
        margin-bottom: 8px;
        &:hover {
          color: @globalColor;
          cursor: pointer;
          // animation: bounceIn 1s;
        }
      }
      .count {
        color: #999999;
      }
      .content_item_pic {
        position: relative;
        width: 224px;
        height: 127px;
        &:hover {
          /deep/ .playMask .play {
            display: block;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
